<template>
	<div>
		<div class="  overflow-x-scroll bg-white whitespace-nowrap px-2 py-3 text-sm border-0 border-b-1 border-gray-300 border-solid">
			<span :class="['mx-1.5 mx-1dot5 text-gray-600', query.order_status === item.id ? 'font-bold text-black text-xl' : '']" v-for="(item, index) in order_status_list" @click="onNavClick(item)">
        {{ item.label }}
      </span>
		</div>

    <u-empty v-if="!runner_order_list.length" :marginTop="100" :iconSize="180" :textSize="28" mode="list"></u-empty>

		<!--<div class="content" v-if="!runner_order_list.length"><image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/no-order.jpg" mode="scaleToFill" /></div>-->

      <!--<view class="bg-white  mx-2 mb-3 my-2 p-3 rounded-xl">-->
      <!--  <view class="flex justify-between items-center pb-1 daya-border-b">-->
      <!--    <view>同城跑腿</view>-->
      <!--    <view>待接单</view>-->
      <!--  </view>-->

      <!--  <view class="px-2">-->
      <!--    <view class="flex justify-start items-center mt-2">-->
      <!--      <view class="mr-4">-->
      <!--        <view class="rounded-full w-5 h-5 bg-black text-white flex justify-center items-center">-->
      <!--          <text class="text-xs">取</text>-->
      <!--        </view>-->
      <!--      </view>-->
      <!--      <view class="overflow-hidden flex-1 ">-->
      <!--        <view class="break-all text-gray-700 text-sm">-->
      <!--          地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址-->
      <!--        </view>-->
      <!--        <view class="text-gray-400">-->
      <!--          测试人员 13800138000-->
      <!--        </view>-->
      <!--      </view>-->
      <!--    </view>-->

      <!--    <view class="flex justify-start items-center mt-2">-->
      <!--      <view class="mr-4">-->
      <!--        <view class="rounded-full w-5 h-5 bg-yellow-400 text-black flex justify-center items-center">-->
      <!--          <text class="text-xs">送</text>-->
      <!--        </view>-->
      <!--      </view>-->
      <!--      <view class="overflow-hidden flex-1 ">-->
      <!--        <view class="break-all text-gray-700 text-sm">-->
      <!--          地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址-->
      <!--        </view>-->
      <!--        <view class="text-gray-400">-->
      <!--          测试人员 13800138000-->
      <!--        </view>-->
      <!--      </view>-->
      <!--    </view>-->

      <!--    &lt;!&ndash;<view class="flex justify-start items-center mt-2">&ndash;&gt;-->
      <!--    &lt;!&ndash;  <view class="mr-4 font-bold text-sm">&ndash;&gt;-->
      <!--    &lt;!&ndash;    需求&ndash;&gt;-->
      <!--    &lt;!&ndash;  </view>&ndash;&gt;-->
      <!--    &lt;!&ndash;  <view class="overflow-hidden flex-1 break-all text-gray-700 text-sm">&ndash;&gt;-->
      <!--    &lt;!&ndash;    地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址&ndash;&gt;-->
      <!--    &lt;!&ndash;  </view>&ndash;&gt;-->
      <!--    &lt;!&ndash;</view>&ndash;&gt;-->

      <!--    &lt;!&ndash;<view class="flex justify-start items-center mt-2">&ndash;&gt;-->
      <!--    &lt;!&ndash;  <view class="mr-4 font-bold text-sm">&ndash;&gt;-->
      <!--    &lt;!&ndash;    备注&ndash;&gt;-->
      <!--    &lt;!&ndash;  </view>&ndash;&gt;-->
      <!--    &lt;!&ndash;  <view class="overflow-hidden flex-1 break-all text-gray-700 text-sm">&ndash;&gt;-->
      <!--    &lt;!&ndash;    地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址&ndash;&gt;-->
      <!--    &lt;!&ndash;  </view>&ndash;&gt;-->
      <!--    &lt;!&ndash;</view>&ndash;&gt;-->
      <!--  </view>-->
      <!--</view>-->



    <view v-if="runner_order_list.length>0">
      <view @click="goToPageUrlLogin('/ymq_canyino2o/pages/errand/detail?order_id='+item.id)" class="bg-white  mx-2 mb-3 my-2 p-3 rounded-xl" v-for="(item,index) in runner_order_list" :key="index">
        <!--:key="'runner_order_'+item.id"-->
        <view class="flex justify-between items-center pb-1 daya-border-b">
          <view>跑腿</view>
          <!--<view>同城跑腿({{item.order_type_text}})</view>-->
          <view class="text-sm font-light">
            <!--订单状态(0订单待支付/1待骑手接单/2骑手已接单/3骑手跑腿中/4跑腿已完成/100订单已取消 -1/全部)'-->
            <span v-if="item.order_status==0" class="bg-yellow-400 text-white text-xs px-2 py-1 rounded">{{ item.order_status_text }}</span>
            <span v-if="item.order_status==1" class="bg-indigo-400 text-white text-xs px-2 py-1 rounded">{{ item.order_status_text }}</span>
            <span v-if="item.order_status==2" class="bg-blue-400 text-white text-xs px-2 py-1 rounded">{{ item.order_status_text }}</span>
            <span v-if="item.order_status==3" class="bg-blue-400 text-white text-xs px-2 py-1 rounded">{{ item.order_status_text }}</span>
            <span v-if="item.order_status==4" class="bg-green-300 text-white text-xs px-2 py-1 rounded">{{ item.order_status_text }}</span>
            <span v-if="item.order_status==100" class="bg-gray-400 text-white text-xs px-2 py-1 rounded">{{ item.order_status_text }}</span>
          </view>
        </view>

        <view class="px-2">
          <view class="flex justify-start items-center mt-2">
            <view class="mr-4">
              <view class="rounded-full w-5 h-5 bg-black text-white flex justify-center items-center">
                <text class="text-xs">取</text>
              </view>
            </view>
            <view class="overflow-hidden flex-1 ">
              <view class="break-all text-gray-700 text-sm">
                {{ item.pickup_province }}{{ item.pickup_city }}{{ item.pickup_district }}{{ item.pickup_address }}
              </view>
              <view class="text-gray-400">
                联系人: {{ item.pickup_name }} {{ item.pickup_tel }}
              </view>
            </view>
          </view>

          <view class="flex justify-start items-center mt-2">
            <view class="mr-4">
              <view class="rounded-full w-5 h-5 bg-yellow-400 text-black flex justify-center items-center">
                <text class="text-xs">送</text>
              </view>
            </view>
            <view class="overflow-hidden flex-1 ">
              <view class="break-all text-gray-700 text-sm">
                {{ item.arrival_province }}{{ item.arrival_city }}{{ item.arrival_district }}{{ item.arrival_address }}
              </view>
              <view class="text-gray-400">
                联系人: {{ item.arrival_name }} {{ item.arrival_tel }}
              </view>
            </view>
          </view>

        </view>
      </view>
      <u-loadmore fontSize="'14px'" height="'50px'" :dashed="false" :line="true" :status="loadmore_status" />
    </view>

  </div>
</template>

<script>
var app = getApp();
export default {
	components: {},
	data() {
		return {
			order_status_index: 0,
      order_status_list: [
				{
					id: -1,
					label: '全部'
				},
				{
					id: 0,
					label: '待支付'
				},
        {
          id: 1,
          label: '待接单'
        },
        {
          id: 2,
          label: '已接单'
        },
				{
					id: 3,
					label: '跑腿中'
				},
				{
					id: 4,
					label: '已完成'
				},
				{
					id: 100,
					label: '已取消'
				}
			],
      //跑腿订单列表
			runner_order_list: [],
      loadmore_status:'loadmore',
      query:{
        order_status:-1,
        page:1,
        pagesize:5
      },
		};
	},
	computed: {},
	mounted() {
	},

  watch: {
    //query对象
    query: {
      handler: function (newVal, oldVal) {
        this.query.page = 1;
        //防抖,无论触发多少次,只执行最后一次  单位ms
        uni.$u.debounce(this.load_runner_order_list, 200)
      },
      deep: true
    },
  },


  // 页面周期函数--监听页面加载
  onLoad() {},
  // 页面周期函数--监听页面初次渲染完成
  onReady() {},
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() {
    this.query.page = 1;
    this.load_runner_order_list();
  },
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {},
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},

  onReachBottom() {
    // todo 触底代码可能无效,需要后期检测
    console.log("触发触底函数")
    if (this.loadmore_status == 'nomore'){
      return
    }
    this.loadmore_status = 'loading';
    this.query.page =  this.query.page+1;
  },

	methods: {
		onNavClick(order_status_item) {
			this.query.order_status = order_status_item.id;
		},
		load_runner_order_list() {
			app.globalData.util.request({
				url: 'entry/wxapp/runner_order',
        data:{
          ...this.query
        },
				success:(res)=>{
          this.runner_order_list = res.data.data;

          if (res.data.data.length>=this.query.pagesize){
            this.loadmore_status = 'loadmore'; //加载更多
          }else{
            this.loadmore_status = 'nomore' //没有更多了
          }

				}
			});
		}
	}
};
</script>

<style scoped>

</style>
